<template>
 <div class="">
  <div class="box">
    <div class="search-chunk">
    <div>
         <el-date-picker v-model="screenFrom.time"
          value-format="YYYY-MM-DD"  type="daterange"
          format="YYYY-MM-DD" range-separator="至" 
          start-placeholder="開始日期" end-placeholder="截止日期" size="small">
      </el-date-picker>
    </div>
      <!-- <div class="ml-[10px]">
        <el-radio v-model="screenFrom.status" label="0" size="small">發票</el-radio>
        <el-radio v-model="screenFrom.status" label="1" size="small">項目</el-radio>
      </div> -->
      <el-button class="ml-[10px]" color="#50BC58" @click="getTableList" size="small">確認</el-button>
    </div>
    <div class="total-chunk">
      <div>&nbsp;&nbsp;總金額{{list.money}}&nbsp;&nbsp;-</div>
      <div>&nbsp;&nbsp;總已付{{list.money}}&nbsp;&nbsp;-</div>
      <div>&nbsp;&nbsp;總退款{{list.refund}}&nbsp;&nbsp;-</div>
      <div>&nbsp;&nbsp;總消費{{list.debt}}&nbsp;&nbsp;-</div>
    </div>
                    <ProTable
                :data="list?.data?.data"
                :page="{}"
                :column="column"
                :rowControl="[]"
                :elProps="{
                  border:true
                }"
                :disabled="[]"
                :controlWidth="[]"
                >
                <template #default="{ row, propname }">
                    <div v-if="propname === 'school'">
                          <div>{{row[propname]?.name}}</div>
                    </div>
                </template>
                </ProTable>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.page" :page-size="page.limit" layout="total, prev, pager, next"
                :total="page.total">
                </el-pagination>
  </div>
 </div>
</template>

<script setup>
import {ref,reactive,onMounted, watch} from 'vue'
import {consume} from '@/http/index.js'
const column = {
  create_time:'發票日期',
  school:'學校名稱',
  number:'發票編號',
  money:'已付',
  refund:'退款',
  debt:'欠款',
  money:'價格',
}
const page = reactive({page: 1,limit: 15,total: 0})
const screenFrom = reactive({
        school_id:localStorage.getItem('school_id'),
        student_id: '',
        time: '',
})
const props = defineProps({
  echo:Object
})
watch(()=>props.echo,(newval)=>{
  screenFrom.student_id = newval.id
},{deep:true,immediate:true})
const list = ref([])
const getTableList = async()=>{
tableList()
}
   const handleSizeChange=(size)=> {
    console.log(size);
        page.limit = size
      }
      const handleCurrentChange=(currentPage)=> {
        console.log(currentPage);
        page.page = currentPage
      }
const tableList  =async()=>{
  let obj = Object.assign(screenFrom,page)
  delete obj.total
  const data = await consume(obj)
  if (data.code == 200) {
    list.value = data.data
    page.total = data.data.data.total
  }
}
defineExpose({
    tableList
})
onMounted(() => {
    
})
</script>

<style scoped lang='less'>
.box {
  padding: 5px;
  button{
    color:#fff;
  }
}
  .total-chunk {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .search-chunk {
    margin-bottom: 10px;
    display: flex;
  }
</style>